/* eslint-disable eqeqeq */
import { Fragment,h } from 'preact';
import classNames from 'classnames';
import PropsTypes from 'prop-types';

const datas = {
	title: '或许换一个活法,能让你走出阴霾',
	href: '#',
	img: './assets/images/43baa4c7c03ed66bae98696de5ebc64e.jpg',
	simpleText: '前段时间回成都,去见了几年未见的老友.一起吃了饭,还带我家宝宝去玩.我问她为什么这么久都还没有打算要孩子,她说,她有一段时间患上了忧郁症,很长的时间才走出来,我听她这么说,我都很惊讶!想问问她原因,可见她欲言又止的神情,我便不再主动问她.就听着她慢慢的说.其实主要的原因还是源自于工作和家庭,工作压力大,每天的程序代码,上级不停的催,她甚至连续好几个通宵的熬夜,,,...',
	author: '温南南',
	createTime: '2018-02-26',
	readCount: 19,
	status: '1',
	children: [
		{ title: '心路历程】请不要在设计这条路上徘徊啦',href: '#',img: './assets/images/7c419fd2e80fab48651a198d223d91b2.jpg',simpleText: '' }
	]
};

const Article = ({ data }) => (
	<div
		className="blogs"
		data-scroll-reveal="enter bottom over 1s"
		data-scroll-reveal-id="2"
		style="-webkit-transform: translatey(24px);transform: translatey(24px);opacity: 1;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;"
		data-scroll-reveal-initialized="true"
	>
		{/* 文章标题 start */}
		<h3 className="blogtitle">
			<a href={data.href}>{data.title}</a>
		</h3>
		{/* 文章标题 end */}

		{/* 图片展示模版 3中 start */}
		<span className={classNames({ blogpic: data.type==1,bigpic: data.type==2,bplist: data.type==3 })}>
			{data.type == 3?(
				<Fragment>
					{data.children.map(i => (
						<li>
							<a href={i.href} title={i.title} >
								<img src={i.img} alt={i.title} />
							</a>
						</li>
					))}
				</Fragment>
			):
				<a href={data.href} title={data.title}><img src={data.img} alt={data.title} /></a>
			}
		</span>
		{/* 图片展示模版 end */}

		{/* 文章简介 */}
		<p className="blogtext">{data.simpleText}</p>

		{/* 文章说明 start */}
		<div className="bloginfo">
			<ul>
				<li className="author">{data.author}</li>
				<li className="lmname">
					<a href="http://showtime.yangqq.com/life/" target="_blank">慢生活</a>
				</li>
				<li className="timer">{data.createTime}</li>
				<li className="view"><span>{data.readCount}</span>{data.status=='1'?'已读':'未读'}</li>
			</ul>
		</div>
		{/* 文章说明 end */}

	</div>
);

Article.propTypes = {
	type: PropsTypes.oneOf(1,2,3)
};

export default Article;
